<template>
	<uni-search-bar @confirm="toSearch" placeholder="请输入公交线路" v-model="searchKey" />
	<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item v-for="(item,index) in lunboList" :key="index">
			<view class="swiper-item">
				<image style="width: 100%;" :src="item.img" mode=""></image>
			</view>
		</swiper-item>
	</swiper>
	<div style="display: flex;justify-content: center;">
					<uni-grid :show-border="false" :column="4" @change="changeGrid">
						<uni-grid-item v-for="(item,index) in gridData" :index="index">
							<view class="grid-item-box" style="background-color: #fff;">
								<uni-icons class="icon" :type="item.icon" :size="30" color="#fe0067" /><br>
								<span class="text">{{item.title}}</span>
							</view>
						</uni-grid-item>
					</uni-grid>
				</div>
	<div style="display">
		<view class="swiper-item" :src="cid">
			<video style="width: 100%;"  :src="cid"  alt="" />
		</view>
	</div>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config";
	const searchKey = ref("")
	
	function toSearch(){
		console.log("asd")
		if (searchKey.value==""){
			uni.showToast({
				title:"请输入查询的公交地图",
				icon:"none"
			})
		}else{
			window.location.href=`https://uri.amap.com/line?name=${searchKey.value}&city=0951&src=mypage&callnative=0`
			// URL: 
		}
	}

	onLoad(() => {
		getLunbo()
		getCurrentPos()
	})

	const lunboList = ref([])
	async function getLunbo() {
		let res = await uni.$get(CONFIG.lengthCloud_url + "/1.1/classes/lunbo")
		console.log(res.statusCode)
		if (res.statusCode === 200) { 
			lunboList.value = res.data.results
			console.log(lunboList.value)
		}
	}
	function getCurrentPos(){
		uni.getLocation({
			success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
		})
	}
	
	const cid=ref("http://spauvf31u.hn-bkt.clouddn.com/39252e87440ec7296e7d0cdb60899ac6.mp4")
	let gridData = [{
					title: '天气预报',
					icon: 'paperplane'
				},
				{
					title: '热映电影',
					icon: 'videocam'
				},
				{
					title: '宁夏教育资源',
					icon: 'map'
				},
				{
					title: '我的小组',
					icon: 'star-filled'
				},
				{
					title: '宁夏十大特产',
					icon: 'star-filled'
				},
			]
			// 点击网格项时触发的方法
				function changeGrid(e) {
					//点击的序号
					let index = e.detail.index
					// 根据不同的需要进行相应的跳转
					console.log(index)
					switch (index) {
						case 0:
							uni.navigateTo({
								url: '/pages/weather7d/weather7d'
							})
							break;
						case 1:
							uni.navigateTo({
								url: '/pages/movie/movie'
							})
							break;
						case 2:
							uni.navigateTo({
								url: '/pages/trafficMap/trafficMap'
							})
							break;
						case 3:
							uni.navigateTo({
								url: '/pages/details/details'
							})
							break;
						case 4:
							uni.navigateTo({
								url: '/pages/techan/techan'
							})
							break;
					}
				}
</script>

<style lang="scss" scoped>
	
	
	// /* 视频样式，除了原本设置的宽度为100%，可以添加一些其他样式，比如高度自适应等 */
	// video {
	//     width: 100%;
	//     height: 300px;
	//     border-radius: 5px;
	//     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	// }
	div {
	    padding: 10px; /* 整体的内边距，可按需调整 */
	}
	
	/* swiper-item类的样式调整，设置外边距等间距相关属性 */
	.swiper-item {
	    margin-bottom: 15px; /* 视频下方的间距，可自行修改数值来改变间距大小 */
	    margin-top: 15px; /* 视频上方的间距 */
	    margin-left: auto; /* 水平居中，左右外边距自动分配 */
	    margin-right: auto;
	}
	/* 视频元素的样式细化，除了宽度可以进一步调整其他属性 */
	video {
	    width: 100%;
	    border-radius: 15px; /* 视频边角设置为圆角，可调整数值改变圆角程度 */
	    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 给视频添加一个淡淡的阴影效果 */
	}
</style>